<template>
  <el-row>
    <el-col :span="24">
      <ul class="one-level-ul">
        <li class="one-level-li" v-for="(item,index) in hisPlanAnaLists" :key="index">
          <div class="hispa-his">
            <div class="hispa-icon-title">
              <img class="hispa-icon" :src="item.url" alt="">
              <span class="hispa-title">{{item.title}}</span>
              <div class="hispa-caidai my_text_center">
                <span>{{item.precision}}</span>
              </div>
            </div>
            <div class="hispa-lists my_text_center">
              <ul>
                <li :class="{active:eve.status}" v-for="(eve,i) in item.tablists" :key="i" @click="showData(eve,index,i,eve.id,eve.title)">{{eve.title}}</li>
              </ul>
            </div>
            <div class="cutting-line"></div>
          </div>
        </li>
      </ul>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      planIndex: 0,
      analyzeIndex: 0,
      historyIndex: 0,
      hisPlanAnaLists: [],
      firstLabelid: null,
      testID: this.$route.params.caizhongID
    };
  },
  // 在页面加载时改变第一个tab的状态
  watch: {
    $route() {
      if (this.testID == this.$route.params.caizhongID) {
        let routePath = this.$route.path;
        if (
          routePath.indexOf("analyze") == -1 &&
          routePath.indexOf("forecastplan") == -1
        ) {
          this.hisPlanAnaLists[0].tablists[0].status = 0;
          if (sessionStorage.getItem("firstText")) {
            this.hisPlanAnaLists[0].tablists.forEach((item, key) => {
              if (item.title == sessionStorage.getItem("firstText")) {
                item.status = 1;
              }
            });
            sessionStorage.removeItem("firstText");
          } else {
            this.hisPlanAnaLists[0].tablists[0].status = 1;
          }
        }
      } else {
        this.testID = this.$route.params.caizhongID;
        this.getLabelMenu();
      }
    }
  },
  computed: {
    isIndexToCold() {
      return this.$store.state.indexToColdVar;
    }
  },
  mounted() {
    // this.getLabelMenu();
    // if (
    //   this.$route.path.indexOf("analyze") != -1 ||
    //   this.$route.path.indexOf("forecastplan") != -1
    // ) {
    this.axios
      .get("analyse/getObtainLotteryLabelMenu", {
        params: {
          lottery_id: this.$route.params.caizhongID
        }
      })
      .then(res => {
        if (res.data.status) {
          this.hisPlanAnaLists = res.data.data;
          if (
            this.$route.path.indexOf("analyze") != -1 ||
            this.$route.path.indexOf("forecastplan") != -1
          ) {
            if (window.location.href.indexOf("forecastplan") > 0) {
              let firstLabelid = this.hisPlanAnaLists[2].tablists[0].id;
              this.$emit("sendIndexToParentForecastPlan", [firstLabelid]);
              if (this.isIndexToCold) {
                this.hisPlanAnaLists[1].tablists[0].status = 1;
              } else {
                this.hisPlanAnaLists[0].tablists[0].status = 1;
              }
            }

            this.hisPlanAnaLists.forEach(item => {
              item.tablists.forEach(elem => {
                if (elem.title == sessionStorage.getItem("text")) {
                  elem.status = 1;
                } else {
                  elem.status = 0;
                }
              });
            });
          } else {
            if (this.isIndexToCold) {
              this.hisPlanAnaLists[1].tablists[1].status = 1;
            } else {
              this.hisPlanAnaLists[0].tablists[0].status = 1;
            }
          }
        } else {
          this.log(res.data.message);
        }
      })
      .catch(err => {
        this.log(err);
      });
    // if (window.location.href.indexOf("forecastplan") > 0) {
    //   this.axios
    //     .get("analyse/getObtainLotteryLabelMenu", {
    //       params: {
    //         lottery_id: this.$route.params.caizhongID
    //       }
    //     })
    //     .then(res => {
    //       if (res.data.status) {
    //         this.hisPlanAnaLists = res.data.data;
    //         let firstLabelid = this.hisPlanAnaLists[2].tablists[0].id;
    //         this.$emit("sendIndexToParentForecastPlan", [firstLabelid]);
    //         // if (this.isIndexToCold) {
    //         //   this.hisPlanAnaLists[1].tablists[0].status = 1;
    //         // } else {
    //         //   this.hisPlanAnaLists[0].tablists[0].status = 1;
    //         // }
    //       } else {
    //         this.log(res.data.message);
    //       }
    //     })
    //     .catch(err => {
    //       this.log(err);
    //     });
    // }
    // }
  },
  methods: {
    //获取历史开奖-预测推荐-走势分析的tabs数据
    getLabelMenu() {
      this.axios
        .get("analyse/getObtainLotteryLabelMenu", {
          params: {
            lottery_id: this.$route.params.caizhongID
          }
        })
        .then(res => {
          if (res.data.status) {
            this.hisPlanAnaLists = res.data.data;
            if (this.isIndexToCold) {
              this.hisPlanAnaLists[1].tablists[1].status = 1;
            } else {
              this.hisPlanAnaLists[0].tablists[0].status = 1;
            }
          } else {
            this.log(res.data.message);
          }
        })
        .catch(err => {
          this.log(err);
        });
    },

    //获取被点击的元素
    /**
     * @param {Number} index  外层循环索引 历史开奖-走势分析-预测推荐 这一层
     * @param {Number} i  内层循环索引
     * @param {Number} itemId  内层内容ID
     * @param {Number} text  内层内容文本
     */

    showData(ele, index, i, itemId, text) {
      switch (index) {
        case 0:
          this.hisPlanAnaLists[0].tablists.forEach((item, key) => {
            if (key === i) {
              if (item.status == 1) {
                item.status = 0;
                // if (sessionStorage.getItem("firstText")) {
                sessionStorage.removeItem("firstText");
                // }
              } else {
                item.status = 1;
                sessionStorage.setItem("firstText", text);
              }
            }
          });
          this.$emit("sendIndexToParentLotteryHis", [
            ele.status,
            ele.identification
          ]);
          this.hisPlanAnaLists[1].tablists.forEach(item => {
            item.status = 0;
          });
          this.hisPlanAnaLists[2].tablists.forEach(item => {
            item.status = 0;
          });
          break;
        case 1:
          this.hisPlanAnaLists[1].tablists.forEach((item, key) => {
            if (key === i) {
              item.status = 1;
            } else {
              item.status = 0;
            }
          });
          this.$emit("sendIndexToParentAnalyze", [i, text]);
          this.hisPlanAnaLists[0].tablists.forEach(item => {
            item.status = 0;
          });
          this.hisPlanAnaLists[2].tablists.forEach(item => {
            item.status = 0;
          });
          sessionStorage.setItem("text", text);
          break;
        case 2:
          this.hisPlanAnaLists[2].tablists.forEach((item, key) => {
            if (key === i) {
              item.status = 1;
            } else {
              item.status = 0;
            }
          });
          this.hisPlanAnaLists[0].tablists.forEach(item => {
            item.status = 0;
          });
          this.hisPlanAnaLists[1].tablists.forEach(item => {
            item.status = 0;
          });
          this.$emit("sendIndexToParentForecastPlan", [itemId, text]);
          sessionStorage.setItem("text", text);
          break;
        default:
          break;
      }
    }
  },
  beforeDestroy() {
    this.$store.commit("indexToColdHotFalse");
  }
};
</script>

<style lang="less" scoped>
@import url(../../../assets/css/historyplananalyze.less);
</style>


